<template>
  <view>
    <uv-sticky :custom-nav-height="0">
      <view class="pb-40rpx top-block">
        <mt-navbar
          title="我的发佣"
          :fixed="false"
          :placeholder="false"
          bg-color="rgba(0,0,0,0)"
          left-icon-color="#ffffff"
          :title-style="{ color: '#ffffff' }"
        >
          <!-- <template #right>
            <view class="flex items-center">
              <text class="text-24rpx text-#ffffff">退款记录</text>
            </view>
          </template> -->
        </mt-navbar>
        <view class="py-40rpx">
          <view class="px-32rpx text-28rpx text-#FFFFFF mb-22rpx">保证金金额</view>
          <view class="flex items-center justify-between pl-32rpx">
            <text class="text-62rpx text-#FFFFFF">{{ amountTransfer(userInfo.bailAmount, 2, true) }}</text>
            <!-- <view
          class="h-54rpx flex items-center pl-20rpx pr-32rpx bg-[rgba(255,255,255,0.1)]"
          style="border-radius: 40rpx 0 0 40rpx"
          @click="goApplyRefund"
        >
          <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-commission2.svg"></image>
          <text class="text-24rpx text-#ffffff ml-8rpx">申请退款</text>
        </view> -->
          </view>
        </view>
      </view>
      <view class="flex items-center bg-#ffffff">
        <view class="flex-1 min-w-0 h-44px">
          <uv-tabs
            v-if="showTabs"
            :list="tabList"
            :current="currentTab"
            :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
            :inactive-style="{ color: '#727687' }"
            line-width="32"
            line-color="#1484EE"
            @click="tabsChange"
          ></uv-tabs>
        </view>
        <view v-show="currentTab === 1" class="text-28rpx text-#727687 pr-32rpx">
          共发佣￥{{ amountTransfer(detailInfo.completeAllAmount, 2, true) }}
        </view>
      </view>
    </uv-sticky>

    <view class="mt-10rpx pb-20rpx">
      <view v-for="(item, index) in dataList" :key="index" class="px-32rpx">
        <view class="flex items-center justify-between pt-24rpx">
          <view class="text-28rpx text-#727687">{{ item.providerCommissionDate }}</view>
          <view v-show="currentTab === 1" class="text-28rpx text-#EFB339">￥{{ amountTransfer(item.completeAmount, 2, true) }}</view>
        </view>
        <template v-if="item.detail?.clueList">
          <view v-for="son in item.detail.clueList" :key="son.id" class="mt-24rpx bg-#ffffff rd-8rpx p-32rpx">
            <view class="flex items-start mb-32rpx">
              <view class="flex-1 min-w-0 text-32rpx text-#1C213E font-bold break-all">{{ son.clueNo }}</view>
              <text v-show="currentTab === 1" class="ml-32rpx px-16rpx py-6rpx text-28rpx text-#007BFF bg-[rgba(0,123,255,0.1)] rd-4rpx"
                >保证金发放</text
              >
            </view>
            <view v-show="currentTab === 0" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">签约时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.transferTime }}</view>
            </view>
            <view v-show="currentTab === 0" class="flex items-start mb-16rpx">
              <view class="w-170rpx text-28rpx text-#727687">凭证：</view>
              <view class="flex-1 min-w-0">
                <view
                  v-for="file in son.contractUrl"
                  :key="file.url"
                  class="w-420rpx break-all mb-8rpx text-28rpx text-#007BFF ellipsis decoration-underline"
                  @click="previewDocument(file.url)"
                  >{{ file.name }}</view
                >
              </view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">成交金额：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(son.transactionAmount, 2, true) }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">发佣金额：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(son.rebateAmount, 2, true) }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">发佣时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.completeTime }}</view>
            </view>
            <view v-show="currentTab === 0" class="flex justify-end">
              <mt-button size="mini" shape="circle" :shake="false" @click="goRake(son)">发佣</mt-button>
            </view>
          </view>
        </template>
      </view>
      <view v-if="!dataList.length" class="pt-200rpx">
        <mt-empty-view></mt-empty-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { providerCommissiongetProviderCommissionListApp, providerCommissiongetProviderCommissionCount } from '@/subCommission/api/index';
import { getProvinceInfo } from '@/api/index.js';
import { amountTransfer } from '@/utils/tools';
import { previewDocument } from '@/utils/tools';
import userStore from '@/store/user';
const user = userStore();

const tabList = ref([
  {
    name: '待发佣',
    type: 0,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '已发佣',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  getData();
  getNum();
}

function goApplyRefund() {
  // uni.navigateTo({
  //   url: '/subCommission/pages/applyRefund'
  // });
}

function goRake(item) {
  uni.navigateTo({
    url: `/subClue/pages/rakeBack?id=${item.id}`
  });
}

const userInfo = ref({});
function getUserInfo() {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
}

const showTabs = ref(false);
function getNum() {
  showTabs.value = false;
  providerCommissiongetProviderCommissionCount({ type: 1 }).then((res) => {
    tabList.value.map((i) => {
      res.data.map((x) => {
        if (i.type == x.rebateStatus) {
          i.badge.value = x.count;
        }
      });
    });
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

const detailInfo = ref({
  completeAllAmount: 0,
  processAllmount: 0
});
const dataList = ref([]);
function getData() {
  providerCommissiongetProviderCommissionListApp({
    type: 1,
    rebateStatus: tabList.value[currentTab.value].type
  }).then((res) => {
    detailInfo.value.completeAllAmount = res.data.completeAllAmount;
    detailInfo.value.processAllmount = res.data.processAllmount;

    const arr = res.data?.list || [];
    for (const item of arr) {
      const l = item.providerCommissionDate.split('-');
      item.providerCommissionDate = `${l[0]}年${l[1]}月`;
      for (const son of item.detail?.clueList) {
        son.contractUrl = son.contractUrl ? JSON.parse(son.contractUrl) : [];
      }
    }
    dataList.value = arr;
  });
}

onLoad(() => {
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});

onShow(() => {
  getData();
  getNum();
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.top-block {
  background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/back-commission-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
